<template>
  <div class="cartControl">
    <transition name="minus">
      <span class="iconfont icon-jian button" v-if="quantity > 0" @click="decrease($event)"></span>
    </transition>
    <transition name="quantity">
      <span class="quantity" v-show="quantity > 0">{{quantity}}</span>
    </transition>
    <span class="iconfont icon-jia button" @click="increase($event)"></span>
  </div>
</template>

<script>
    export default {
        props:{
          quantity: {
            type: Number,
            required: true
          }
        },
        computed: {
        },

        methods: {
          decrease: function (event) {
            this.$emit("decrease", event)
          },
          increase: function (event) {
            this.$emit('increase', event)
          }
        }
    }
</script>

<style lang="scss" scoped>
  @import "~assets/scss/mixin.scss";

  .cartControl {
    .minus-enter-active, .minus-leave-active {
      transition: all .4s linear;
    }
    .minus-enter, .minus-leave-active {
      opacity: 0;
      transform: translateX(24px) rotate(180deg);
    }

    .quantity-enter-active, .quantity-leave-active {
      transition: all .4s linear;
    }
    .quantity-enter, .quantity-leave-active {
      opacity: 0;
    }

    .button {
      /*注意这里inline-block很重要，这样才能使得translate3d起作用*/
      display: inline-block;
      vertical-align: top;
      font-size: 24px;
      line-height: 24px;
      color: #00a0dc;
    }
    .quantity {
      display: inline-block;
      vertical-align: top;
      font-size: 10px;
      line-height: 24px;

      padding: 0 6px;
    }
  }
</style>
